<template>
	<div class="spread con customer_index">
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/purchase' }">homepage</el-breadcrumb-item>
		  	<el-breadcrumb-item>PurchaseRequest List</el-breadcrumb-item>
		</el-breadcrumb>
	<div>
		<div style="margin-top:5px;">
			<span>Date:</span>
			<el-date-picker
				v-model="rantime"
				value-format="yyyy-MM-dd"
				type="daterange"
				start-placeholder="Start Date"
				end-placeholder="End Date"
				:default-time="['00:00:00', '23:59:59']"
			></el-date-picker>
			<el-button type="primary" icon="el-icon-search" @click="handerSearch">Search</el-button>
		</div>
		
		<div style="margin-top:10px;">
			<!--<el-button  type="danger" icon="el-icon-tickets" @click="AddSalesOrder()">Add New SalesOrder</el-button>
			<el-button  type="danger" icon="el-icon-tickets" @click="AddSalesOrderItem()">Add OrderItem</el-button>
			<el-button  type="danger" icon="el-icon-tickets" @click="OrderItemList()">OrderItemList</el-button>
		
			
			<el-button  type="danger" icon="el-icon-tickets" @click="view()">View</el-button>
			<el-button  type="danger" icon="el-icon-tickets" @click="Edit()">Edit</el-button> -->
			
			<div style="float:right; ">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="page.per_page"
					:page-size="page.size"
					@current-change="handleCurrentChange"
					:current-page.sync="page.currentPage"
				></el-pagination>
			</div>
			
		</div>
	</div>
		<el-table 
			v-loading="loading"
			element-loading-text="loading"
		    :data="tableData"
		    style="width: 100%"
			:height="tableHeight"
		    border
		    fit
		    highlight-current-row
    		@current-change="shandleCurrentChange"
    		@row-click="rowClick"
    		@sort-change='tableSortChange'
		   >
		   <el-table-column
		      label="PRStatus" width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.PRStatusName }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="SalesRep" width="120">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.SalesRepIDName }}</span>
		      	</template>
		    </el-table-column>
		   <el-table-column
		      label="Orderdate" width="110">
		      	<template slot-scope="scope">
		        	<span>{{ isTimeString(scope.row.Orderdate) }}</span>
		      	</template> 
		    </el-table-column>
		   
		    <el-table-column
		      label="SalesOrderNo" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.SalesOrderNo_no }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="CustomerOrder No" width="160" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.CustomerPONo }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="CustomerName" width="160">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.CustomerName }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="Brand" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.BrandAlias }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="PartNo" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PartNo }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="OrderQty" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.OrderQty }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="PriceEach" width="100">
		      	<template slot-scope="scope">
		        	<span>{{ toDecimal(scope.row.PriceEach) }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="PRQty" width="80">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PRQty }}</span>
		      	</template>
		    </el-table-column>
		     <el-table-column
		      label="LeadFree" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.LeadFreeName }}</span>
		      	</template>
		    </el-table-column>
		    
		     <el-table-column
		      label="ScheduleDate"  width="110">
		      	<template slot-scope="scope">
		        	<span>{{ isTimeString(scope.row.ScheduleDate) }}</span>
		      	</template>
		    </el-table-column>
		    
		     <el-table-column
		      label="ShipVia"  width="130">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.ShipVia }}</span>
		      	</template>
		    </el-table-column>
		   
			<el-table-column
		      label="SetPurchRepBy" width="150"> 
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.SetPurchRepByName }}</span>
		      	</template>
		    </el-table-column>
		     <el-table-column
		      label="ItemDesc"  width="130">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.ItemDesc }}</span>
		      	</template>
		    </el-table-column>
		    
		  </el-table>
		  
		  <!-- 订单详情  -->
		 <!--  <div>
		     <el-divider  content-position="left" >PRLink</el-divider>  
		  </div>
		  
		  <el-table 
			element-loading-text="loading"
		    :data="tableDataPRLink"
		    style="width: 100%;margin=top:0px;"
			:height=tableHeight
		    border
		    fit
		    highlight-current-row
    		@current-change="handleCurrentOrederItem"
    		@sort-change='tableSortChange'
		   >
		    <el-table-column
		      label="PurchOrderNo" width="120">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PurchOrderNo }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="PurchRep" width="160" >
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PurchRepIDName }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="LinkQty"  width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.LinkQty }}</span>
		      	</template>
		    </el-table-column>
		     <el-table-column
		      label="Buy Price"  width="100">
		      	<template slot-scope="scope">
		        	<span>{{ toDecimal(scope.row.PriceEach) }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="PODate" width="120"> 
		      	<template slot-scope="scope">
		        	<span >{{  scope.row.PODate }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="PartNo" width="200">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.PartNo }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="Brand" width="100"> 
		      	<template slot-scope="scope">
		        	<span >{{  scope.row.Brandname }}</span>
		      	</template>
		    </el-table-column>
		     <el-table-column
		      label="DateCode" width="120">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.DateCode }}</span>
		      	</template>
		    </el-table-column>
		    
		    <el-table-column
		      label="LeadTime" width="100">
		      	<template slot-scope="scope">
		        	<span>{{ scope.row.LeadTime }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="Package" width="120"> 
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.Package }}</span>
		      	</template>
		    </el-table-column>
		    
		   
		    
		    <el-table-column
		      label="PaymentTerm"  width="120">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.PaymentTerm }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="Vendor" width="100">
		      	<template slot-scope="scope">
		        	<span >{{ scope.row.VendorName }}</span>
		      	</template>
		    </el-table-column>
		    <el-table-column
		      label="LinkMemo" width="100">
		      	<template slot-scope="scope">
		        	<span ></span>
		      	</template>
		    </el-table-column>
		  </el-table> -->
		  
		 
		  
	</div>
</template>

<script type="text/javascript">
	export default {
		data(){
			var sdDate = [];
			return {
				loading:false,
				tableData: [],
				tableHeight: 250,
				token:"",
				listQuery:{sortby:'',order:'desc'},
				fileDwonload:false,
				customerstatus:100,
				customername:'',
				currentRow: [],
				rantime:[],
				
				tableDataPRLink:[],
				currentRowOrederItem:'',
				
				
				page: {
					 total: 0,
					 size: 1, 
					 currentPage: 1,
					 num: 1,
					
					 },
					
					}
				},
				 
		created(){
				this.token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
				
		},
		mounted() {
			const that = this;
			// 动态设置表格高度适应窗口
			window.onresize = () => {
				let a = window.innerHeight;
				//that.tableHeight = a-403;
			}
		},
		methods:{
			getBrandList(){
		      	axios.get('/api/brand').then(result => {
						this.BrandList = result.data.result;
					});
		      },
		      
			getSalesList(){
				this.loading = true;
			axios.get('/api/purchase/PrsSelectList?page='+this.page.num+'&time=' +this.rantime).then(result => {
					if (result.data.code == 200) {
						this.tableData = result.data.result.data;
						this.page.total = result.data.total;
						//this.page.size = result.data.size;
						this.page.per_page = result.data.last_page;
						this.loading = false;
					} else {
						this.$notify.error({
							title: 'Fail',
							message: result.data.message
						});
					}
				})
				.catch(error => {
					this.$notify.error({
						title: 'Fail',
						message: 'ERROR'
					});
				});
			},
			
			
			Edit(){
				if (this.currentRow.length <= 0) {
					this.$notify({ type: 'error', message: 'Please choose one line.' });
					return false;
				}
			},
			
			
		
			//时间
			shandleCurrentChange(data) {
			        this.currentRow = data;
			      },
			      tableSortChange(column){
				if (column.order === 'descending') {
			        this.listQuery.sortby = column.prop
			        this.listQuery.order = 'desc'
			      } else {
			        this.listQuery.sortby = column.prop
			        this.listQuery.order = 'asc'
			      }
			},
			
		    handerSearch(){
		    	this.tableDataPRLink=[];
		   	 	this.getSalesList();
		    },
		    getCookie(name){
				var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
				if(arr=document.cookie.match(reg)){
					return unescape(arr[2]);
				}else{
					return null;
				}
			},
		    handleCurrentChange(val) { 
               this.page.num = val;
                this.getSalesList();
            },
            
            //订单详情 salesorderid
            rowClick(row){
            	var SalesOrderID =  row.SalesOrderID;
            	axios.get('/api/sale/salesorderitem?SalesOrderID='+SalesOrderID).then(result => {
					this.tableDataPRLink = result.data.result;
				});
            
            },
            handleCurrentOrederItem(val){
            	 this.currentRowOrederItem= val;
            },
            
            
		    handleDelete(index, row) {
		        axios.get('/api/order/status?id='+row.id+"&type=2"+"&order_sn="+row.order_sn)
					.then(res => {
						this.$notify({
	    					type:"success",
	    					title:"Success",
	    					message:res.data.message
	    				})
	    				
					})
		    },
		    isTimeString(time){
		    	if(time=='' || time== null || time == 'undefined'){
		    	 return '';
		    	}else{
		    		return time.substring(0,10);
		    	}
		    },
		    
		    objTimeString(time){
			    if(time=='' || time== null || time == 'undefined'){
			    	 return '';
			    	}else{
			    		return time.date.substring(0,10);
			    	}
		    },
		   toDecimal(x) {
		      var f = parseFloat(x); 
		      if (isNaN(f)) { 
		        return false; 
		      } 
		      var f = Math.round(x*100)/100; 
		      var s = f.toString(); 
		      var rs = s.indexOf('.'); 
		      if (rs < 0) { 
		        rs = s.length; 
		        s += '.'; 
		      } 
		      while (s.length <= rs + 2) { 
		        s += '0'; 
		      } 
		      return s; 
		    },
		    addTime(m){
		    	return m<10?'0'+m:m 
		    },
		    
			getTime(){
				var date = new Date()
			    let y = date.getFullYear()
			    let m = date.getMonth() + 1
			    let d = date.getDate()
			    let time = y + '-' + m + '-' + d;
				let d1 = '01';
				let time1 = y + '-' + m + '-' + d1;
				this.rantime[0]=time1;
			    this.rantime[1]=time;
			},
			
			timeFormat(shijianchuo)
			{
				//shijianchuo是整数，否则要parseInt转换
				var time1 = new Date(shijianchuo);
				var y = time1.getFullYear();
				var m = time1.getMonth()+1;
				var d = time1.getDate();
				var h = time1.getHours();
				var mm = time1.getMinutes();
				var s = time1.getSeconds();
				return y+'-'+this.addTime(m)+'-'+this.addTime(d)+' '+this.addTime(h)+':'+this.addTime(mm)+':'+this.addTime(s);
			}
			
		}
	}
</script>

<style lang="scss">
	.customer_index{
		.sort.el-select .el-input {
			width: 140px;
		}
	}
  	.el-table .warning-row {
    	background: oldlace;
  	}
  	.el-select .el-input {
    	width: 120px;
  	}
  	.input-with-select .el-input-group__prepend {
    	background-color: #fff;
  	}
  	.el-table .success-row {
    	background: #f0f9eb;
  	}
  	.con{
	    .el-breadcrumb{ 
	      	height: 40px;
	    }
	 .juli{
	 	margin-left:10px;
	 	}   
  	}
	.el-pagination__total{
		float: left;
		margin-top: 2px;
	}
	.pages{
		float: right;
	}
</style>
